<template>
  <div>
    <div id="container" style="width:100%;height:450px;"></div>
  </div>
</template>

<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import { TMap } from "./index";
export default {
  props: {
    lat: {
      type: Number,
      default: 34.34127
    },
    lon: {
      type: Number,
      default: 108.93984
    },
    mapKey: {
      tyep: String
    },
    address: {
      tyep: String
    }
  },
  data() {
    return {
      geocoder: undefined,
      marker: null,
      resultDatail: {}
    };
  },
  created() {
    this.initMap();
  },
  methods: {
    //初始化地图
    initMap() {
      let that = this
      that.getLocation(that.address)
      // TMap(that.mapKey).then(qq => {
        // var map;
        // var center = new qq.maps.LatLng(this.lat, this.lon);
        // map = new qq.maps.Map(document.getElementById("container"), {
        //   center: center,
        //   zoom: 15
        // });   
        //调用地址解析类
        // this.geocoder = new qq.maps.Geocoder({
        //   complete: result => {
        //     map.setCenter(result.detail.location);
        //     this.marker = new qq.maps.Marker({
        //       map,
        //       position: result.detail.location
        //     });
        //     this.resultDatail = result.detail;
        //     this.$emit("getCoordinates", result.detail);
        //   },
        //   error: err => {
        //    this.$message.error('请重新输入地址，地址中请包括省市区信息')
        //   },
        // });
        // this.geocoder.getAddress(center);
        // this.geocoder.getLocation(this.address);
        // 开启监听点击
        // qq.maps.event.addListener(map, "click", event => {
        //   this.marker.setMap(null);
        //   this.marker.position = {
        //     lat: event.latLng.getLat(),
        //     lng: event.latLng.getLng()
        //   };
        //   var coord = new qq.maps.LatLng(
        //     event.latLng.getLat(),
        //     event.latLng.getLng()
        //   );
        //   this.geocoder.getAddress(coord);
        // });
      // });
    },
    // 搜索地点
    searchKeyword(address) {
      // this.marker.setMap(null);
      // this.geocoder.getLocation(address);
      this.getLocation(address)
    },
    getLocation(address) {
      let that = this;
      that.$jsonp("https://apis.map.qq.com/ws/geocoder/v1?", {
        address: `${address}`,
        key: that.mapKey,
        output: "jsonp",
      }).then((res) => {
        if(res.status === 0){
          TMap(that.mapKey).then(qq => {
            var center = new qq.maps.LatLng(res.result.location.lat, res.result.location.lng);
            let map = new qq.maps.Map(document.getElementById("container"), {
              center: center,
              zoom: 15
            }); 
          })
        }else{
          that.$message.error(res.message)
        }
      }).catch(err=>{
        that.$message.error(err.message)
      })   
    }
  }
};
</script>

<style scoped>
</style>
